<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  </head>
  <body>
    <!-- MVVM中的View -->
    <div id="app">
      <input v-focus type="text" />
    </div>

    <script>
      // 定义全局指令（全局：其它组件都可以使用，相当于它是一个公共的）
      /**
       * 参数1：指令的名字，不要加 v-
       * 参数2：对象，用于实现指令的逻辑
       */
      //   Vue.directive('focus', {
      //     inserted(el) {
      //       // el代表我们的指令作用于哪个节点上，他就代表哪个节点
      //       //   console.log(el)
      //       el.focus()
      //     }
      //   })

      // 定义多个全局指令
      //   Vue.redirect('其它',{})

      new Vue({
        el: '#app', // el属性必须要写，这个el属性代表的是vue解析的范围
        directives: {
          // 局部指令
          focus: {
            inserted(el) {
              // el代表我们的指令作用于哪个节点上，他就代表哪个节点
              //   console.log(el)
              el.focus()
            }
          }
        }
      })
    </script>
  </body>
</html>
